<template>
  <div>
    <el-card>
      <div slot="header" style="display: flex; justify-content: space-between">
        <span>
          <el-cascader
            v-model="queryParams.salesGrade"
            placeholder="选择店铺分组"
            :options="cascadeList"
            :props="{ checkStrictly: true }"
            style="width: 250px; height: 30px"
            @change="init('')"
          >
          </el-cascader>

          综合销售报表</span
        >

        <span>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport('')"
              >导出</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              style="margin-left: 5px"
              type="primary"
              size="mini"
              @click="handleGo('/conf/ProTypeConf')"
              >品类配置</el-button
            >
          </el-col>
        </span>
      </div>
      <el-table
        :data="itemDataI"
        :height="300"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        border
      >
        <!-- @cell-click="tableList" -->
        <!-- <el-table-column
              label="达人名称"
              align="center"
              prop="talentName"
            ></el-table-column> -->
        <el-table-column
          label="品类"
          align="center"
          prop="productType"
        ></el-table-column>
        <el-table-column label="销售总金额" align="center" prop="payAmount" />
        <!-- <el-table-column
              label="销售订单数 "
              align="center"
              prop="orderQuantity"
            ></el-table-column> -->
        <el-table-column
          label="销售总件数"
          align="center"
          prop="productQuantity"
        />
        <el-table-column
          label="退款总金额"
          align="center"
          prop="returnAmount"
        />
        <el-table-column
          label="净销售金额"
          align="center"
          prop="netSaleAmount"
        />
        <el-table-column
          label="退货件数"
          align="center"
          prop="returnQuantity"
        />
        <el-table-column label="净销售成本" align="center" prop="netSaleCost" />
        <el-table-column
          label="销售零售总额"
          align="center"
          prop="retailAmount"
        />
        <el-table-column
          label="退货零售总额"
          align="center"
          prop="retailReturnAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column label="折扣率" align="center" prop="discountRateStr" />
      </el-table>
    </el-card>
    <el-card>
      <div slot="header" style="display: flex; justify-content: space-between">
        <span>
          <el-cascader
            v-model="queryParams.salesGrade"
            placeholder="选择店铺分组"
            :options="cascadeList"
            :props="{ checkStrictly: true }"
            style="width: 250px; height: 30px"
            @change="init('达播')"
          >
          </el-cascader>

          达播销售报表</span
        >

        <span>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport('达播')"
              >导出</el-button
            >
          </el-col>
        </span>
      </div>
      <el-table
        :data="itemDataII"
        :height="300"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        border
      >
        <!-- @cell-click="tableList" -->
        <!-- <el-table-column
              label="达人名称"
              align="center"
              prop="talentName"
            ></el-table-column> -->
        <el-table-column
          label="品类"
          align="center"
          prop="productType"
        ></el-table-column>
        <el-table-column label="销售总金额" align="center" prop="payAmount" />
        <!-- <el-table-column
              label="销售订单数 "
              align="center"
              prop="orderQuantity"
            ></el-table-column> -->
        <el-table-column
          label="销售总件数"
          align="center"
          prop="productQuantity"
        />
        <el-table-column
          label="退款总金额"
          align="center"
          prop="returnAmount"
        />
        <el-table-column
          label="净销售金额"
          align="center"
          prop="netSaleAmount"
        />
        <el-table-column
          label="退货件数"
          align="center"
          prop="returnQuantity"
        />
        <el-table-column label="净销售成本" align="center" prop="netSaleCost" />
        <el-table-column
          label="销售零售总额"
          align="center"
          prop="retailAmount"
        />
        <el-table-column
          label="退货零售总额"
          align="center"
          prop="retailReturnAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column label="折扣率" align="center" prop="discountRateStr" />
      </el-table>
    </el-card>
    <el-card>
      <div slot="header" style="display: flex; justify-content: space-between">
        <span>
          <el-cascader
            v-model="queryParams.salesGrade"
            placeholder="选择店铺分组"
            :options="cascadeList"
            :props="{ checkStrictly: true }"
            style="width: 250px; height: 30px"
            @change="init('自播')"
          >
          </el-cascader>

          自播销售报表</span
        >

        <span>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport('自播')"
              >导出</el-button
            >
          </el-col>
        </span>
      </div>
      <el-table
        :data="itemDataIII"
        :height="300"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
        border
      >
        <!-- @cell-click="tableList" -->
        <!-- <el-table-column
              label="达人名称"
              align="center"
              prop="talentName"
            ></el-table-column> -->
        <el-table-column
          label="品类"
          align="center"
          prop="productType"
        ></el-table-column>
        <el-table-column label="销售总金额" align="center" prop="payAmount" />
        <!-- <el-table-column
              label="销售订单数 "
              align="center"
              prop="orderQuantity"
            ></el-table-column> -->
        <el-table-column
          label="销售总件数"
          align="center"
          prop="productQuantity"
        />
        <el-table-column
          label="退款总金额"
          align="center"
          prop="returnAmount"
        />
        <el-table-column
          label="净销售金额"
          align="center"
          prop="netSaleAmount"
        />
        <el-table-column
          label="退货件数"
          align="center"
          prop="returnQuantity"
        />
        <el-table-column label="净销售成本" align="center" prop="netSaleCost" />
        <el-table-column
          label="销售零售总额"
          align="center"
          prop="retailAmount"
        />
        <el-table-column
          label="退货零售总额"
          align="center"
          prop="retailReturnAmount"
        />
        <el-table-column label="退货率" align="center" prop="returnRateStr" />
        <el-table-column label="折扣率" align="center" prop="discountRateStr" />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  listBiLiveOrder,
  getBiLiveOrder,
  delBiLiveOrder,
  addBiLiveOrder,
  updateBiLiveOrder,
  selectLiveVoStatistics,
  selectLiveData,
  selectLiveOrderSaleList,
  selectLiveSaleStatistics,
  selectProTypeList,
  BiLiveCheckCost,
  BiLiveCheckCostlist,
  delBiLiveCheckCost,
} from "@/api/live/BiLiveOrder";
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
export default {
  props: {
    query: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      itemDataI: [],
      itemDataII: [],
      itemDataIII: [],
      liveTypeList: ["自播", "达播", "综合"],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        liveType: "",
        salesGrade: [],
        // firstLevelList: null,
        // secondLevelList: null,
        // threeLevelList: null,
      },
      // 店铺
      cascadeList: [],
    };
  },
  watch: {
    query: {
      handler: function (newnew, oldold) {
        this.init("");
        this.init("达播");
        this.init("自播");
        // if (JSON.stringify(this.query) == "{}") {
        //   return;
        // }
        // this.queryParams = { ...this.queryParams, ...this.query };
        // selectProTypeList(this.queryParams).then((response) => {
        //   this.itemData = response ? response : [];
        // });
      },
      deep: true,
      immediate: true,
    },
    // queryParams: {
    //   handler: function (newnew, oldold) {

    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList();
  },

  methods: {
    init(liveType) {
      if (JSON.stringify(this.query) == "{}") {
        return;
      }
      this.queryParams.liveType = liveType ? liveType : "";
      this.queryParams = { ...this.queryParams, ...this.query };
      selectProTypeList(this.queryParams).then((response) => {
        if (liveType == "") {
          this.itemDataI = response ? response : [];
        }
        if (liveType == "达播") {
          this.itemDataII = response ? response : [];
        }
        if (liveType == "自播") {
          this.itemDataIII = response ? response : [];
        }
      });
    },
    handleExport(liveType) {
      this.queryParams.liveType = liveType ? liveType : "";
      this.download(
        "live/BiLiveOrder/liveProTypeCostExport",
        {
          ...this.queryParams,
        },
        `成本核算_${new Date().getTime()}.xlsx`
      );
    },
    handleGo(path) {
      this.$router.push(path);
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listAll().then((response) => {
        let list = [];
        response.forEach((item) => {
          if (item.isTalentLive == "是") {
            list.push(item);
          }
        });
        let result = this.transformData(list);
        // this.value = [
        //   result[0].label,
        //   result[0].children[0].label,
        //   result[0].children[0].children[0].label,
        // ];
        this.queryParams.salesGrade = [
          result[0].label,
          result[0].children[0].label,
          result[0].children[0].children[0].label,
        ];
        this.cascadeList = result;
        // this.handleChange();
        // //后端list
        // this.getBiLiveCheckCostlist();
      });
    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach((item) => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.channelShopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组
        let brandIndex = result.findIndex(
          (brandObj) => brandObj.label === brand
        );
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: [],
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组
        let channelIndex = result[brandIndex].children.findIndex(
          (channelObj) => channelObj.label === channel
        );
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: [],
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组
        let shopIndex = result[brandIndex].children[
          channelIndex
        ].children.findIndex((shopObj) => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
  },
};
</script>

<style>
</style>